<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="600px"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="配置名称" prop="name">
        <el-input v-model="form.name" placeholder="如：主账号" />
      </el-form-item>

      <el-form-item label="GitHub 用户名" prop="username">
        <el-input v-model="form.username" placeholder="GitHub 用户名" />
      </el-form-item>

      <el-form-item label="Access Token" prop="access_token">
        <el-input
          v-model="form.access_token"
          type="password"
          placeholder="GitHub Personal Access Token"
          show-password
        />
        <div style="font-size: 12px; color: #999; margin-top: 5px;">
          需要 repo 权限。
          <el-link
            type="primary"
            href="https://github.com/settings/tokens"
            target="_blank"
            :underline="false"
          >
            创建 Token
          </el-link>
        </div>
      </el-form-item>

      <el-form-item label="仓库名前缀">
        <el-input v-model="form.repo_prefix" placeholder="如：static-" />
        <div style="font-size: 12px; color: #999; margin-top: 5px;">
          实际仓库名为：{{ form.repo_prefix || '' }}example-com
        </div>
      </el-form-item>

      <el-form-item label="默认分支">
        <el-input v-model="form.default_branch" placeholder="main" />
      </el-form-item>

      <el-form-item label="私有仓库">
        <el-switch v-model="form.private_repo" />
        <span style="margin-left: 10px; font-size: 12px; color: #999;">
          {{ form.private_repo ? '创建私有仓库' : '创建公开仓库' }}
        </span>
      </el-form-item>

      <el-form-item label="配置描述">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="可选"
        />
      </el-form-item>

      <el-form-item label="启用状态">
        <el-switch v-model="form.is_active" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createGitHubConfig, updateGitHubConfig } from '@/api/static_web_github'

export default {
  name: 'GitHubConfigDialog',
  data() {
    return {
      visible: false,
      loading: false,
      isEdit: false,
      form: {
        name: '',
        username: '',
        access_token: '',
        repo_prefix: '',
        default_branch: 'main',
        private_repo: false,
        description: '',
        is_active: true
      },
      rules: {
        name: [
          { required: true, message: '请输入配置名称', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入 GitHub 用户名', trigger: 'blur' }
        ],
        access_token: [
          { required: true, message: '请输入 Access Token', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑 GitHub 配置' : '新增 GitHub 配置'
    }
  },
  methods: {
    show(data = null) {
      this.visible = true
      this.isEdit = !!data
      if (data) {
        this.form = { ...data }
      } else {
        this.resetForm()
      }
    },
    handleClose() {
      this.visible = false
      this.resetForm()
    },
    resetForm() {
      this.form = {
        name: '',
        username: '',
        access_token: '',
        repo_prefix: '',
        default_branch: 'main',
        private_repo: false,
        description: '',
        is_active: true
      }
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    },
    handleSubmit() {
      this.$refs.form.validate(async(valid) => {
        if (!valid) return

        this.loading = true
        try {
          if (this.isEdit) {
            await updateGitHubConfig(this.form.id, this.form)
            this.$message.success('配置更新成功')
          } else {
            await createGitHubConfig(this.form)
            this.$message.success('配置创建成功')
          }
          this.$emit('success')
          this.handleClose()
        } catch (error) {
          console.error('保存失败:', error)
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>
